<template>
  <div>
    <div class="shoplist">
      <div class="shopitem" v-for="(item,index) in msiteList" :key="index">
				<router-link :to="'/shop/'+item.id">
				<div class="item-left">
					<img :src="'//fuss10.elemecdn.com/'+item.image_path.substr(0,1)+'/'+item.image_path.substr(1,2)+'/'+item.image_path.substr(3)+'.'+item.image_path.substr(32)+'?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'" alt="">
          <div class="new-shop" v-if="item.is_new"><span>新店</span></div>
				</div>
				<div class="item-right">
					<div class="title">
						<div class="title-left">
							<span v-if="item.is_premium" class="is-premium">品牌</span>
							<h3>{{item.name}}</h3>
						</div>
						<div class="title-right">
							<span>保</span>
							<span>票</span>
						</div>
					</div>
					<div class="tag">
						<div class="tag-left">
							<div class="rate-wrap">
								<i class="iconfont">&#xe70e;</i>
								<i class="iconfont">&#xe70e;</i>
								<i class="iconfont">&#xe70e;</i>
								<i class="iconfont">&#xe70e;</i>
								<i class="iconfont">&#xe70e;</i>
							</div>
							<span class="rate">{{item.rating}}</span>
							<span>月售{{item.recent_order_num}}单</span>
						</div>
						<div class="tag-right">
							<!-- <span>准时达</span> -->
							<span class="fengniao" v-if="item.delivery_mode">蜂鸟专送</span>
						</div>
					</div>
					<div class="info">
						<div class="info-left">
							<span>￥{{item.float_minimum_order_amount}}起送</span>/
							<span>配送费￥{{parseInt(item.float_delivery_fee)}}</span>/
							<span>{{item.average_cost}}</span>
						</div>
						<div class="info-right">
							<span class="distance">{{item.distance < 1000 ? item.distance + 'm': (item.distance/1000).toFixed(2) + 'km'}}</span>
							<span class="duration"><strong>{{item.order_lead_time}}</strong>分钟</span>
						</div>
					</div>
					<div class="activities activities-off">
						<div class="activity-item" v-for="(item,index) in item.activities" :key="index">
							<span class="activity-tag" :style="{'background-color':'#'+item.icon_color}">{{item.icon_name}}</span>
							<span>{{item.description}}</span>
						</div>
						<div class="more-activity" @click="toggleAct($event)">
							<span>{{item.activities.length}}</span>个活动<svg viewBox="0 0 12 6" width="100%" height="100%"><path fill-rule="evenodd" d="M4.577 5.423c.79.77 2.073.767 2.857 0l4.12-4.026C12.345.625 12.09 0 10.985 0H1.027C-.077 0-.33.63.457 1.397l4.12 4.026z"></path></svg>
						</div>
					</div>
				</div>
				</router-link>
			</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import $ from 'jquery'
export default {
  name: 'shoplist',
  computed: {
    ...mapState(['msiteList'])
  },
  methods: {
    toggleAct: function (e) {
      e.preventDefault()
      $(e.target).toggleClass('more-activity-on')
      $(e.target).parent('.activities').toggleClass('activities-off')
    },
    ...mapMutations({
      getList: 'GETMSITELIST',
      loadMore: 'MOREMSITELIST'
    })
  },
  mounted: function () {
    this.getList()
    var that = this
    $(() => {
      $(window).scroll(function () {
        var scrollTop = $(this).scrollTop()
        var scrollHeight = $(document).height()
        var windowHeight = $(this).height()
        if (scrollTop + windowHeight >= scrollHeight - 20) {
          that.loadMore()
        }
      })
    })
  }
}
</script>


<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
.shopitem{
	a{
		display: block;
		text-decoration: none;
		border-bottom: 1px solid #eee;
		background: #fff;
		display: flex;
		color: #000;
		.item-left{
    position: relative;
		padding: px2rem(30) px2rem(20);
		img{
			width: px2rem(120);
			height: px2rem(120);
		}
    .new-shop{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;
      width: px2rem(64);
      height: px2rem(64);
      background-image: -webkit-linear-gradient(315deg,#26ce61,#26ce61 50%,transparent 0);
      background-image: linear-gradient(135deg,#26ce61,#26ce61 50%,transparent 0);
      font-size: px2rem(18);
      span{
        position: absolute;
        top: px2rem(10);
        left: px2rem(2);
        display: block;
        color: #fff;
        font-weight: 700;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
	}
	.item-right{
		flex:1;
		padding: px2rem(30) px2rem(20);
		padding-left: 0;
		.title{
			display: flex;
			justify-content: space-between;
			height: px2rem(32);
			.title-left{
				display: flex;
        flex: 1;
				h3{
					font-size: px2rem(30);
					line-height: px2rem(32);
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
				}
				span {
					display: inline-block;
					padding: 0 px2rem(4);
					font-size: px2rem(22);
					line-height: px2rem(32);
					margin-right: px2rem(10);
					color: #52250a;
					background-color: #ffd930;
					font-weight: 600;
				}
			}
			.title-right{
				span{
					position: relative;
					top: px2rem(-26);
					font-size: px2rem(20);
					color: #999;
					border:1px solid #ccc;
					border-radius: px2rem(3);
				}
			}
		}
		.tag{
			color: #666;
			font-size: px2rem(22);
			margin-top: px2rem(17);
			display: flex;
			justify-content: space-between;
			.tag-left{
				display: flex;
				.rate-wrap{
					i{
						font-size: px2rem(20);
						color: #ffaa0c;
					}
				}
				.rate{
					margin:0 px2rem(8);
					color: #ff6000;
				}
			}
			.tag-right{
				span{
					padding: 0 px2rem(5);
    				border: 1px solid #44a5ff;
				    border-radius: px2rem(5);
				    background-color: #fff;
				    color: #2395ff;
				    font-size: px2rem(20);
				    /*line-height: .346667rem;*/
				}
				.fengniao{
					background-color: #2395ff;
    				color: #fff;
				}
			}
		}
		.info{
			color: #666;
			font-size: px2rem(22);
			margin-top: px2rem(20);
			display: flex;
			justify-content: space-between;
			.info-right{
				strong{
					font-size: px2rem(20);
					font-weight: normal;
				}
				.duration{
					color: #2395ff;
				}
			}
		}
		.activities{
			position: relative;
			margin-top: px2rem(10);
			padding: px2rem(10) 0;
			border-top: 1px solid #eee;
			font-size: px2rem(20);
			color: #939393;
			.activity-item{
				line-height: px2rem(20);
				margin-top: px2rem(18);
				.activity-tag{
					background-color: rgb(240, 115, 115);
					color: #fff;
					border-radius: px2rem(5);
					padding: 0 px2rem(2);
				}
			}
			.more-activity{
				position: absolute;
				right: 0;
				top: px2rem(18);
				svg{
					width: px2rem(13);
					fill: #939393;
					margin-left: px2rem(10);
					transition: all .3s;
				}
			}
			.more-activity-on{
				svg {
					transform: rotate(180deg);
				}
			}
		}
    .activities-off{
      height: px2rem(90);
      overflow: hidden;
    }
	}

	}
}
</style>

